<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>活动管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="title" label="文章标题" width="400"></el-table-column>
      <el-table-column prop="total_comment_count" label="总评论数"></el-table-column>
      <el-table-column prop="fans_comment_count" label="粉丝评论数"></el-table-column>
      <el-table-column label="评论状态">
           <template slot-scope="scope">
               {{scope.row.comment_status ? '正常':'关闭'}}
          </template>
      </el-table-column>
      <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="success" size="mini" v-if="scope.row.comment_status === false" @click="openComment(scope.$index,scope.row)">打开评论</el-button>
            <el-button type="danger" size="mini" v-if="scope.row.comment_status === true" @click="closeComment(scope.$index,scope.row)">关闭评论</el-button>
          </template>
      </el-table-column>
    </el-table>

    <!-- 分页部分 -->
    <div class="pagination">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total_count">
        </el-pagination>
    </div>
  </el-card>
</template>

<script>
// 引入获取文章接口
import {getList,changeComment} from '@/api/article'
export default {
  data() {
    return {
      tableData: [],
      total_count:null,
      page:1,
      per_page:10,
    };
  },
   methods:{
        //获取文章评论列表
       getComment(){
           getList({
               response_type:'comment',
               page:this.page,
               per_page:this.per_page,
           })
           .then((res)=>{
               this.tableData = res.data.data.results;
               this.total_count = res.data.data.total_count;
           })
           .catch((err)=>{
               console.log('获取文章评论失败');
           });
       },
        //打开评论
       openComment(index,row){
           let id = row.id.toString();
           changeComment({
               article_id:id
           },{
               allow_comment:true
           })
           .then((res)=>{
            //重新获取修改之后的评论
               this.getComment();
           })
           .catch((err)=>{
               console.log('修改评论状态失败');
           });
       },
       //关闭评论
       closeComment(index,row){
           let id = row.id.toString();
           changeComment({
               article_id:id
           },{
               allow_comment:false
           })
           .then((res)=>{
            //    重新获取修改之后的评论
                this.getComment();
           })
           .catch((err)=>{
               console.log('关闭评论状态失败');
           });
       },

        // 切换每页显示多少条数据时触发
       handleSizeChange(size){
        //  console.log(size);//获取到每页显示的条数
            this.per_page = size;
            // 切换每页显示的条数时，始终从第一页显示
            this.page = 1;
            // 重新获取文章评论列表
            this.getComment();

       },
        //切换页码时触发
       handleCurrentChange(page){
            //console.log(page);//获取到的切换的当前页码
            this.page = page;
            // 重新获取评论列表
            this.getComment();
       }


   },
   mounted(){
       this.getComment();
   }
};
</script>


<style lang="less" scoped>
.pagination {
    margin-top: 20px;
}
</style>